<template>
  <div class="dp comp-ldrk">
    <div class="left">
      <div :class="['person-type person-type-1', current === 'age1' ? 'active' : '']" @click="onChange('age1')">
        <div class="age">0~18岁</div>
        <div class="count">{{info.age1Cnt}}人</div>
      </div>
      <div :class="['person-type person-type-2', current === 'age2' ? 'active' : '']" @click="onChange('age2')">
        <div class="age">18~35岁</div>
        <div class="count">{{info.age2Cnt}}人</div>
      </div>
      <div :class="['person-type person-type-3', current === 'age3' ? 'active' : '']" @click="onChange('age3')">
        <div class="age">35~55岁</div>
        <div class="count">{{info.age3Cnt}}人</div>
      </div>
      <div :class="['person-type person-type-4', current === 'age4' ? 'active' : '']" @click="onChange('age4')">
        <div class="age">55岁以上</div>
        <div class="count">{{info.age4Cnt}}人</div>
      </div>
    </div>
    <div class="right">
      <el-table
        class="table"
        :data="tableData"
        row-key="id"
        height="390px"
        style="width: 100%"
      >
        <el-table-column prop="name" label="姓名" width="140" align="center"></el-table-column>
        <el-table-column prop="idCard" label="居住证号" width="200"></el-table-column>
        <el-table-column prop="linkPhone" label="个人联系电话" width="140"></el-table-column>
        <el-table-column prop="residenceAddress" label="户籍地址">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.residenceAddress" placement="top">
              <span class="line-clamp-1">{{ row.residenceAddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="censusRegisterAddress" label="暂住地址">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.censusRegisterAddress" placement="top">
              <span class="line-clamp-1">{{ row.censusRegisterAddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="masterName" label="户主姓名" width="140"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "CompLdrk",
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          age1Cnt: 0,
          age2Cnt: 0,
          age3Cnt: 0,
          age4Cnt: 0
        }
      }
    }
  },
  data() {
    return {
      tableData: [],
      current: 'age1'
    }
  },
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.onChange(this.current)
        }
      }
    }
  },
  methods: {
    onChange(type) {
      this.tableData = this.info[`${type}List`] ? this.info[`${type}List`] : []
      this.current = type
    }
  }
}
</script>

<style lang="scss" scoped>
  .comp-ldrk {
    display: flex;
    .left {
      width: 180px;
      .person-type {
        width: 131px;
        height: 80px;
        margin-bottom: 24px;
        text-align: center;
        line-height: 1;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid transparent;
        &.active {
          border: 1px solid #3E94FF;
        }
        .age {
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          padding-top: 17px;
        }
        .count {
          padding-top: 14px;
          font-size: 20px;
          font-weight: 400;
          color: #FFFFFF;
        }
        &-1 {
          margin-top: 12px;
          background-color: rgba(62, 148, 255, 0.2);
        }
        &-2 {
          background-color: rgba(255, 157, 62, 0.2);
        }
        &-3 {
          background-color: rgba(62, 255, 212, 0.2);
        }
        &-4 {
          background-color: rgba(144, 62, 255, 0.2);
          margin-bottom: 0;
        }
      }
    }
    .right {
      flex: 1;
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{
      background-color: transparent!important;
    }
  }
</style>
